<template>
	<view class="container">
		<view class="search">
			<view style="flex: 1;">
				<u-search 
				bgColor="#F6F7FB"
				placeholder="请输入商品名称" 
				v-model="search" 
				:showAction="false"></u-search>
			</view>
			<button size="mini" class="search-btn" @click="dateilto(1)">搜索</button>
		</view>
		<view class="search_body">
			<text class="search_body_text1">历史记录</text>
			<view class="search_body_right" v-if="searchlist.length>0" @tap='openConfirm()'>
				<image src="https://farm-city.oss-cn-hangzhou.aliyuncs.com/static/images/delete.png"></image>
				<text class="search_body_text2">清空</text>
			</view>
		</view>
		<view class="body_items">
			<text v-if="searchlist.length>0" v-for="(item,index) in searchlist" :key="index" @click="dateilto(item)">{{item}}</text>
		</view>
		<u-popup :safeAreaInsetBottom="false" :safeAreaInsetTop="false" mode="center" :show="show" round="5"
			:overlay="true" :customStyle="customStyle1" @close="show=false">
			<view class="u-popup-slot">
				<text class="u-popup-slot_text">确认清空？</text>
				<view class="u-popup-slot_flex">
					<button @click="show = !show" class="cancel">取消</button>
					<button @click="remov()" class="confirm">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				customStyle1: {
					'width': '80%'
				},
				show: false,
				// 搜索内容
				search: '',
				searchlist: '',
			}
		},
		onLoad() {
			_this=this
		},
		onShow() {
			this.getsearchlist()
		},
		methods: {
			//获取搜索记录列表
			async getsearchlist() {
				const data = await _this.$post('api/Search')
				this.searchlist = data.data.search
			},
			openConfirm(){
				if(this.searchlist.length==0){
					this.$u.toast('没有搜索内容哦~')
					return
				}
				this.show=true
			},
			//跳转到搜索详情页
			dateilto(search) {
				var key_word=this.search;
				if(search != 1){
					key_word = search
				}
				if(key_word==''){
					this.$u.toast('请输入搜索内容')
					return
				}
				//路由跳转
				this.$u.route({
					url: 'pages/sort/searchdetail',
					params: {
						keyword:key_word
					}
				})
			},
			//清空搜索记录
			async remov() {
				if (this.user_id) {
					const data = await _this.$post('api/EmptySearch')
					if(data.code==200){
						this.show=false
						this.getsearchlist()
					}else{
						this.$u.toast(data.msg)
					}
				}
			}
		}
	}
</script>
<!-- #ifdef APP-PLUS -->
<style>
	page{
		background: #FFFFFF;
	}
</style>
<!-- #endif -->
<style lang="scss" scoped>
	page{
		background: #FFFFFF;
	}
	.container{
		padding: 20rpx 20rpx 0 20rpx;
	}
	.search {
		display: flex;
		align-items: center;
		.search-btn{
			background: none;
			padding: 0 0 0 15rpx;
		}
	}

	.u-search {
		flex: 1;
	}

	.search_body {
		display: flex;
		align-items: center;
		margin-top: 30rpx;
	}

	.search_body image {
		width: 19rpx;
		height: 19rpx;
		margin-right: 10rpx;
	}

	.search_body_text1 {
		flex: 1;
	}

	.search_body_text2 {
	}

	.body_items {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.body_items text {
		padding: 6rpx 24rpx;
		border-radius: 30px;
		background: $bg-F7F7F7;
		font-size: 24rpx;
		margin: 20rpx 20rpx;
	}
</style>
